<template>
  <div class="consultFromWrap">
    <div class="lWrap">
      <span class="timeSpan">时间范围</span>
      <el-date-picker
        v-model="formData.beginDate"
        type="date"
        placeholder="开始时间"
        class="timePick"
      >
      </el-date-picker>
      -
      <el-date-picker
        v-model="formData.endDate"
        type="date"
        placeholder="结束时间"
        class="timePick"
      >
      </el-date-picker>

      <div class="s-box">
        <div class="search-box">
          <el-input
            placeholder="请输入检索关键词"
            v-model="formData.searchTxt"
            @keydown.enter.native="search"
            class="elinp"
          >
            <i class="iconfont" slot="prefix">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  {{ formData.inputTypeName }}
                  <i class="el-icon-caret-bottom "></i>
                  <i v-show="false" class="el-icon-caret-top"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeCommand('title', '标题')"
                    >标题</el-dropdown-item
                  >
                  <el-dropdown-item :command="beforeCommand('text', '正文')"
                    >正文</el-dropdown-item
                  >
                  <el-dropdown-item :command="beforeCommand('source', '来源')"
                    >来源</el-dropdown-item
                  >
                  <el-dropdown-item
                    :command="beforeCommand('keywords', '关键词')"
                    >关键词</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </i>
          </el-input>
          <el-button class="search-button" @click="handleSearch"
            >搜索</el-button
          >
          <el-button type="text" class="resetBtn" @click="handleReset"
            >全部重置</el-button
          >
          <el-select
            class="s-select"
            v-model="formData.industryLabel"
            placeholder="按产业选择"
          >
            <el-option
              v-for="item in industryList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    keyword: {
      type: String,
    },
  },
  data() {
    return {
      formData: {
        beginDate: "",
        endDate: "",
        inputType: "title",
        searchTxt: "",
        industryLabel: "",
        inputTypeName: "标题",
      },
      industryList: [],
    };
  },
  created() {
    this.getDictAll();
  },
  mounted() {
    this.formData.searchTxt = this.keyword;
    this.formData.endDate = new Date();
  },
  watch: {
    "formData.beginDate": {
      handler(newV, oV) {
        if (!this.compareDay(newV, this.formData.endDate)) {
          this.formData.beginDate = "";
          this.$message({
            type: "warning",
            message: "开始时间不能晚于结束时间~",
          });
        }
      },
    },
    "formData.endDate": {
      handler(newV, oV) {
        if (!this.compareDay(this.formData.beginDate, newV)) {
          this.formData.endDate = "";
          this.$message({
            type: "warning",
            message: "结束时间不能早于开始时间~",
          });
        }
      },
    },
  },
  methods: {
    // 获取产业链全景图字典数据
    getDictAll() {
      const data = JSON.parse(localStorage.getItem("allDict"));
      this.industryList = data.find((list) => {
        return list.dictType == "information_industry";
      }).dataList;
    },
    beforeCommand(command, name) {
      return {
        command: command,
        name: name,
      };
    },
    handleCommand(command) {
      this.formData.inputType = command.command;
      this.formData.inputTypeName = command.name;
      this.$emit("getFormData", this.formData);
    },
    handleSearch() {
      this.formData.beginDate = this.formData.beginDate || "";
      this.formData.endDate = this.formData.endDate || "";
      this.$emit("submitForm", this.formData);
    },
    handleReset() {
      this.formData.beginDate = "";
      this.formData.endDate = new Date();
      this.formData.inputType = "";
      this.formData.searchTxt = "";
      this.formData.industryLabel = "";
      this.formData.inputTypeName = "标题";
    },
  },
};
</script>

<style lang="scss" scoped>
.condition {
  .lWrap {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    .reportBtn {
      position: absolute;
      right: 0;
      top: 0px;

    }
    .timeSpan {
      margin-right: 0.1rem;
    }
    .el-date-editor {
      width: 1.4rem;
    }
    .s-box {
      position: relative;
      z-index: 2;
      width: 5.3rem;
      margin-left: 0.2rem;
      .search-box {
        position: relative;
        width: 100%;
        display: flex;

        .elinp {
          position: relative;
          ::v-deep {
            .el-input__inner {
              width: 250px;
              padding-left: 0.76rem;
              border-color: $mainColor;
              border-radius: 0.08rem;
              color: #283146;
              &:focus {
                border-color: $mainColor;
              }
            }
            .el-input__prefix {
              height: 50%;
              top: 25%;
              width: 0.65rem;
              border-right: 1px solid #dbdef2;
              .el-dropdown {
                position: relative;
                top: -0.03rem;
                cursor: pointer;
                span {
                  font-size: 0.14rem;
                }
              }
            }
          }
          .search-icon {
            position: absolute;
          }
        }
        .search-button {
          width: 1rem;
          color: #fff;
          background-color: $mainColor;
          margin-left: 0.14rem;
          margin-right: 0.1rem;
        }
        .s-select {
          margin-left: 50px;
          ::v-deep .el-input {
            width: 150px;
          }
        }
        .resetBtn {
          color: #333;
        }
      }
    }
  }
}
</style>
<style>
.timePick .el-input__inner {
  padding: 0 0 0 0.1rem;
}
.timePick .el-input__prefix {
  display: none;
}
.timePick .el-input input::-webkit-input-placeholder {
  text-align: center;
  position: relative;
  left: -0.1rem;
}
</style>
